﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作多彩照片墙</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .picbox{
            position: relative;
        }
        .picbox img{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 300px;
        }
        .picbox img:nth-of-type(1){
            position:absolute;
            top:100px;
            left:600px;
            transform:  rotate(15deg);
            z-index: 3;
        }
        .picbox img:nth-of-type(2){
            position:absolute;
            top:80px;
            left:400px;
            transform:  scale(.7) rotate(-20deg);
            z-index: 1;
        }
        .picbox img:nth-of-type(3){
            position:absolute;
            top:200px;
            left:400px;
            transform: scale(.9) rotate(10deg);
            z-index: 1;
        }
        .picbox img:nth-of-type(4){
            position:absolute;
            top:110px;
            left:800px;
            transform:  scale(.6) rotate(-10deg);
            z-index: 1;
        }
        .picbox img:nth-of-type(5){
            position:absolute;
            top:90px;
            left:700px;
            transform:  scale(.9) rotate(-20deg);
            z-index: 1;
        }
        .picbox img:nth-of-type(6){
            position:absolute;
            top:200px;
            left:800px;
            transform:  scale(.6) rotate(15deg);
            z-index: 4;
        }
        .picbox img:nth-of-type(7){
            position:absolute;
            top:170px;
            left:1040px;
            transform:  scale(.9) rotate(20deg);
            z-index: 2;
        }
        .picbox img:nth-of-type(8){
            position:absolute;
            top:200px;
            left:600px;
            transform: scale(.5) rotate(45deg);
            z-index: 2;
        }
        .picbox img:nth-of-type(9){
            position:absolute;
            top:100px;
            left:1000px;
            transform:scale(.9) rotate(20deg);
            z-index: 1;
        }
        .picbox img:nth-of-type(10){
            position:absolute;
            top:200px;
            left:980px;
            transform: scale(.6) rotate(15deg);
            z-index: 3;
        }
        .picbox img:hover{
            transform: scale(1.5) skew(0deg);
            z-index: 999;
            box-shadow:#ddd 0 0 3px 3px;
        }
    </style>
</head>
<body>
    <div class="picbox">
        <img src="image/1.jpg"/>
        <img src="image/2.jpg"/>
        <img src="image/3.jpg"/>
        <img src="image/4.jpg"/>
        <img src="image/5.jpg"/>
        <img src="image/6.jpg"/>
        <img src="image/7.jpg"/>
        <img src="image/8.jpg"/>
        <img src="image/9.jpg"/>
        <img src="image/10.jpg"/>
    </div>
</body>
</html>